<!--
具有分页功能的table-->

<div class="row">
  <div class="col-xs-12">
  <!--  <h3 class="header smaller lighter blue">jQuery dataTables</h3>-->
    <div class="table-header">
      Results for "Latest Registered Domains"
    </div>

    <div class="table-responsive">
      <table id="sample-table-2" class="table table-striped table-bordered table-hover">
        <thead> <!--表格固定行before-->
        <tr>
          <th class="center">
            <label>
              <input type="checkbox" class="ace" />
              <span class="lbl"></span>
            </label>
          </th>
          <th>序号</th>
          <th>分类名</th>

          <th class="hidden-480">
            <i class="icon-time bigger-110 hidden-480"></i>
            创建时间
          </th>

          <th>
            所属用户
          </th>
          <th class="hidden-480">状态</th>
          <th>博客总数/篇</th>
          <th></th>
        </tr>
        </thead> <!--表格固定行after-->

        <tbody>

        <% @blog_sorts.each do |sort| %>
            <tr id="sort_row_<%= sort.id %>">
              <td class="center">
                <label>
                  <input type="checkbox" class="ace" />
                  <span class="lbl"></span>
                </label>
              </td>
              <td><%= sort.id %></td>

              <td>
                <a href="<%=  %>"><%= sort.sort_name %></a>
              </td>
              <td class="hidden-480"><%= DateTime.parse(sort.created_at.to_s).strftime('%y-%m-%d %H:%M:%S').to_s %></td>

              <td><a href=""><%= sort.admin_user.nil? ? '无名' : sort.admin_user.email %> </a> </td>

              <td class="hidden-480">
                <span class="label label-sm label-info arrowed arrowed-righ">状态</span>
              </td>
              <td><%= sort.posts_count %></td>
              <td>
                <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">

                  <!--<a class="green" href="<%= edit_manager_blog_sort_path(sort) %>">
                    <i class="icon-pencil bigger-130"></i>
                  </a>-->

                  <a class="red" href="<%= manager_blog_sort_path(sort) %>" data-method="delete" data-remote="true" rel="nofollow" data-confirm="确认删除？">
                    <i class="icon-trash bigger-130"></i>
                  </a>
                </div>

                <div class="visible-xs visible-sm hidden-md hidden-lg">
                  <div class="inline position-relative">
                    <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown">
                      <i class="icon-caret-down icon-only bigger-120"></i>
                    </button>

                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                      <li>
                        <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																				<span class="blue">
																					<i class="icon-zoom-in bigger-120"></i>
																				</span>
                        </a>
                      </li>

                      <li>
                        <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
																				<span class="green">
																					<i class="icon-edit bigger-120"></i>
																				</span>
                        </a>
                      </li>

                      <li>
                        <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																				<span class="red">
																					<i class="icon-trash bigger-120"></i>
																				</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </td>
            </tr>
        <% end %>

        </tbody>
        <%= form_for(@blog_sort, remote: true, url: {action: :create}) do |f| %>
            <%# 不要把表单放到tbody或tfoot标签中无法提交 %>
            <tr hidden id="tr-add-blog-sort" >
              <td class="center">

              </td>
              <td></td>

              <td>
                <%= f.text_field :sort_name , id: 'blog_sort_sort_name' %>
              </td>


              <td class="hidden-480"></td>

              <td> </td>

              <td class="hidden-480">
                <span class="label label-sm label-info arrowed arrowed-righ"></span>
              </td>

              <td>
                <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">

                    <button type="submit" name="commit" id="commit_sort">
                      <i class="icon-zoom-in bigger-130"></i>
                    </button>




                  <!--<a class="green" href=" ">
                    <i class="icon-pencil bigger-130"></i>
                  </a>

                  <a class="red" href=" " data-method="delete" rel="nofollow" data-confirm="确认删除？">
                    <i class="icon-trash bigger-130"></i>
                  </a>-->
                </div>

                <div class="visible-xs visible-sm hidden-md hidden-lg">
                  <div class="inline position-relative">
                    <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown">
                      <i class="icon-caret-down icon-only bigger-120"></i>
                    </button>

                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                      <li>
                        <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																				<span class="blue">
																					<i class="icon-zoom-in bigger-120"></i>
																				</span>
                        </a>
                      </li>

                      <li>
                        <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
																				<span class="green">
																					<i class="icon-edit bigger-120"></i>
																				</span>
                        </a>
                      </li>

                      <li>
                        <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																				<span class="red">
																					<i class="icon-trash bigger-120"></i>
																				</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </td>
            </tr>
        <% end %>
      </table>

      <div><button type="button" class="" id="btn-add-blog-sort">增加分类</button></div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('#btn-add-blog-sort').click(function(){
     var $sort =  $('#tr-add-blog-sort');
      var $c =   $sort.attr("hidden");
      if($c != 'hidden'){
           $sort.attr("hidden","hidden");
      }else{
          $sort.removeAttr("hidden");
      }

  })
        $('button#commit_sort').click(function(){
           var $c =  $('#blog_sort_sort_name').val()
            if($c.length == 0){
                alert('对不起，不允许为null');
                return false;
            }
        })

</script>


<!-- page specific plugin scripts -->

<script src="/assets/js/jquery.dataTables.min.js"></script>
<script src="/assets/js/jquery.dataTables.bootstrap.js"></script>


<script type="text/javascript">
    jQuery(function($) {
        var oTable1 = $('#sample-table-2').dataTable( {
            "aoColumns": [
                { "bSortable": false },
                null, null,null, null, null,
                { "bSortable": false }
            ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                    .each(function(){
                        this.checked = that.checked;
                        $(this).closest('tr').toggleClass('selected');
                    });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
            return 'left';
        }
    })
</script>


